<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Viant secret</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background: #ccc;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

        .error-message {
            color: #d5423e;
            padding: 0.75em;
            font-size: 0.9em;
        }

        .secret-box {
            background: #fff;
            padding: 2em;
            border-radius: 8px;
            box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
        }


        .form-group {
            margin-bottom: 1em;
        }

        .form-group label {
            display: block;
            margin-bottom: 0.5em;
            font-weight: bold;
        }

        .form-group input {
            width: 100%;
            padding: 0.5em;
            border: 1px solid #ccc;
            border-radius: 4px;
        }



        .forgot a {
            color: #3498db;
            text-decoration: none;
        }

        .secret-button {
            width: 100%;
            padding: 0.75em;
            background-color: #d5423e;
            color: #fff;
            border: none;
            border-radius: 4px;
            font-weight: bold;
            cursor: pointer;
        }

        .secret-button:hover {
            background-color: #b93a34;
        }
    </style>
</head>
<body>
<div class="secret-box">
    <h3>Credentials for connection: ${Connector}</h3>
    <form method="post">
        <input type="hidden" name="uuid" value="${UUID}">
        <!-- Error message section -->
        <div class="error-message">${ErrorMessage}</div>
        <div class="form-group">
            <label for="name">Connection Name</label>
            <input type="text" id="name" name="name" value="${Name}" placeholder="Connection name">
        </div>
        <div class="form-group">
            <label for="host">Host</label>
            <input type="text" id="host" name="host" value="${Host}" placeholder="Hostname or IP">
        </div>
        <div class="form-group">
            <label for="port">Port</label>
            <input type="number" id="port" name="port" value="${Port}" placeholder="Port">
        </div>
        <div class="form-group">
            <label for="db">Database / Dataset</label>
            <input type="text" id="db" name="db" value="${Db}" placeholder="Database or dataset">
        </div>
        <div class="form-group">
            <label for="project">Project (for BigQuery)</label>
            <input type="text" id="project" name="project" value="${Project}" placeholder="GCP project">
        </div>
        <div class="form-group">
            <label for="options">Options</label>
            <input type="text" id="options" name="options" value="${Options}" placeholder="driver options">
        </div>
        <div class="form-group">
            <label>Preview DSN</label>
            <div style="font-family: monospace; white-space: pre-wrap; word-break: break-all; border:1px solid #eee; padding:0.5em; border-radius:4px; background:#fafafa;">${Dsn}</div>
        </div>
        <div class="form-group">
            <label for="username">Username</label>
            <input type="text" id="username" name="username" placeholder="Username">
        </div>
        <div class="form-group">
            <label for="password">Password</label>
            <input type="password" id="password" name="password" placeholder="Password">
        </div>
        <div style="display:flex; gap:0.5em;">
            <button class="secret-button" type="submit" name="action" value="submit">Submit</button>
            <button class="secret-button" type="submit" name="action" value="cancel" style="background-color:#888;">Cancel</button>
        </div>
    </form>
</div>
</body>
</html>
